<script lang="ts" setup>
import { injectState } from "../state";
import { whManagerBsTbParkGridPatrolTmpGetListUsingPost } from "@/genapi/wh";
import bus from "vue3-eventbus";

defineOptions({ name: "TeamList" });

const { selectedList, tableRef, teamDetailsRef } = injectState()!;

const teamList = ref([]);

const getTeamList = async () => {
	const { data } = await whManagerBsTbParkGridPatrolTmpGetListUsingPost({
		data: {},
	});
	teamList.value = data;
};
bus.on('updateTeamList', () => {
  getTeamList()
})
onMounted(() => {
	getTeamList();
});
</script>

<template>
	<div class="teamList">
		<div class="teamListTitle">
			<span>巡检队列表</span>
			<el-button type="primary" @click="teamDetailsRef?.trigger('write')"
				>+ 新增</el-button
			>
		</div>
		<div class="teamListContent">
			<el-scrollbar>
				<div
					class="teamCard"
					v-for="(item, i) in teamList"
					:key="i"
					@click="teamDetailsRef?.trigger('write', item)"
				>
					<div class="cardTitle">
						<span style="font-size: 16px; font-weight: 600">{{
							item.teamName
						}}</span>
						<span>></span>
					</div>
					<div class="divideBar"></div>
					<div class="cardDetails">
						<div class="detailsItem">负责区域：{{ item.createBy }}</div>
						<div class="detailsItem">巡查频率：{{ item.patrolFrequency }}</div>
					</div>
				</div>
			</el-scrollbar>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.teamList {
	height: 100%;
	width: 27%;
	display: flex;
	flex-direction: column;
	padding-right: 20px;
	.teamListTitle {
		height: 40px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: 600;
	}
	.teamListContent {
		width: 100%;
		height: calc(100% - 40px);
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		.teamCard {
			margin-top: 10px;
			width: 100%;
			height: 100px;
			min-height: 100px;
			box-shadow: 16px 11px 11px -5px rgba(180, 180, 180, 0.5);
			font-size: 14px;
			padding-left: 15px;
			padding-right: 15px;
			padding-top: 5px;
			border: 0.5px solid #dedede;
			&:hover {
				background-color: rgba(230, 244, 254, 1);
			}
			.cardTitle {
				display: flex;
				justify-content: space-between;
				width: 100%;
				height: 30px;
				align-items: center;
			}
			.divideBar {
				width: 100%;
				height: 1px;
				background-color: #acacac7e;
			}
			.cardDetails {
				width: 100%;
				height: calc(100% - 30px - 1px);
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				padding: 5px 0;
				color: rgba(96, 98, 102, 1);
			}
		}
	}
}
</style>
